<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QQ SPACE</title>
    <style>
        /** { margin: 0; padding: 0; list-style: none; box-sizing: border-box; -webkit-appearance: none; }*/
        body {
            background: #212f3d;
            max-width: 1100px;
            margin: auto;
            padding: 6px;
            /*border: 1px solid lightgrey;*/
        }
        a{
            text-decoration: none;
        }
        .liked {
            color: red; /* 空心的颜色 */
        }
        .liked path {
            fill: red; /* 实心的颜色 */
        }

        button {
            background: #212f3d;
            color: #b0aeae;
            font-size: 24px;
            border: 1px solid lightgrey;
            border-radius: 5px;
            padding: 12px 22px;
            cursor: pointer;
        }

        button:hover {
            background: #3a4f63;
        }

        textarea {
            font-size: 23px;
            border: 1px solid lightgrey;
            border-radius: 5px;
            padding: 12px 22px;
            /*display: none;*/
            background: #212f3d;
            color: #b0aeae;
        }
    </style>
</head>
<body>
<div th:replace="~{common-page/header.html :: myheader}"></div>

<DIV style="color: #b0aeae;">
    <h1>QQ SPACE</h1>
    <h2>当前是 第 <span id="page"></span> 页</h2>
</DIV>
<div th:each="item, iterStat : ${qq_space_list}">
    <a th:href="@{'/qq-space-detail/'+${item.id}}" style="border: 1px solid lightgrey;  color: #b0aeae; display: block; margin-bottom: 12px; padding: 10px;">
        <p th:text="${item.description}" style="font-size: 22px; "></p>
        <div th:each="img : ${item.imgPaths}" style="display: inline; ">
            <img th:src="@{'/images/QQ-space/'+${img}}" alt="Image" style="width:180px;"/>
        </div>
        <div>
            <p th:text="${item.uploadDate}"></p>
        </div>
    </a>
    <div th:switch="${user_role}">
        <!-- 只有当用户角色为 'admin' 时才显示更新按钮 -->
        <button th:attr="onclick=|modify_this('${item.id}')|" th:case="'admin'"   style="margin-bottom: 45px;"> modify</button>
    </div>
</div>

<br>

<div style="display: flex; justify-content: space-evenly;">
    <button onclick="goToIndexPage()"> 首页</button>
    <button onclick="goToNextPrePage(-1)"> 上一页</button>
    <button onclick="goToNextPrePage(1)"> 下一页</button>
</div>

<br><br><br><br><br><br><br>
</body>
<script src="/js/common-plugin/userInputPlugin.js"></script>
<script>
    // 获取当前 URL 中的 page 参数
    function getPageFromUrl() {
        const url = window.location.href;
        const pageParam = url.split('/').pop(); // pop() 返回数组的最后一个元素 "1"
        return parseInt(pageParam) || 1; // 如果未找到 page 参数，默认为 1
    }

    function goToIndexPage() {
        window.location.href = `/qq-space-list/1`;
    }

    // 更新 URL 到下一页
    function goToNextPrePage(add_minus) {
        const currentPage = getPageFromUrl();
        const nextPage = currentPage + add_minus;
        if (nextPage < 1) {
            return;
        }
        const newUrl = `/qq-space-list/${nextPage}`;
        window.location.href = newUrl;
    }

    // 初始化函数
    function init() {
        document.getElementById('page').innerText = getPageFromUrl();
    }

    // 页面加载时初始化事件
    window.onload = init;


    function modify_this(id) {
        // alert(id);
        // 调用插件，并处理用户输入
        get_user_input(id, "", 'input', 100, function (userInput) {
            if (userInput === null) {
                console.log('用户点击了取消按钮');
            } else {
                console.log('用户输入的内容:', userInput);
                let api_url = "/api/qq-space/update";   // 如果是 django 后端一定需要加上 / 反斜杠
                let postObj = {
                    id: id,
                    describ: userInput,
                };
                fetch(api_url, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json',},
                    body: JSON.stringify(postObj),
                })
                    // .then(response => response.json())  // 解析响应为 json, 解析响应为 json, 无需再 JSON.parse() 解析
                    .then(response => response.text())  // 解析响应为 文本
                    .then(data => {
                        if (data === "success") {
                            window.location.reload();
                        }
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });
            }
        });
    }

    function submit__() {
        alert("submit")
    }
</script>
</html>